<template>
	<view class="main">
		<view class="topBox">
			<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" :circular="circular">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<view class="swiper-item">
						<image class="image" :src="baseImage + item.picdir" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>

			<!-- <view class="logoBox" :style="{top:getStateHeight+'px',height:getMenuRectHeight+'px'}">
				<img :src="baseImage + usual.logo" alt="" class="img" v-if="usual.logo">
				<img :src="$store.imgUrl + 'logo.png'" alt="" class="img" v-else>
				<text class="span">{{ usual.title }}</text>
			</view> -->


			
		</view>

		<view class="content">
			<view class="searchBox">
				<view class="inpBox">
					<van-icon name="search" color='#777' size='30rpx'  @click="setFocus" />
					<input type="text" :focus="focus" v-model="filters.keywords" @blur='focus = false' placeholder-class="searchInp" ref="searchinput" placeholder="请输入关键词" />
					<view @click="onSearch" class="searchBtn">搜索</view>
				</view>
			</view>
			
			<!-- <view class="tabBox">
				<view class="span" :class="{'active':filters.gangwei==item.gangwei}" v-for="item in cataList"
					@click="tabClick(item)">
					{{type==1? item.title.slice(0,5):item.gangwei.slice(0,5)}}
				</view>
				<view class="addIcon" @click="toSubmit">
					<van-icon name="plus" custom-style="font-size:31rpx;font-weight: bold;color:#fff;" />
				</view>
			</view> -->

			<view class="menu">
				<view class="menu-content">
					<scroll-view scroll-x="true" class="menu-view" :show-scrollbar="false" enhanced>
						<view class="menu-item keywords" :class="{'active':isKeywords}" v-if="keywordsShow">
							<view class="menu-close" @click.stop="keywordsClose">
								<van-icon name="cross" color="#333" :size="12"/>
							</view>
							<text @click="tabClick('keywords')">搜索结果</text>
						</view>
						<view class="menu-item" :class="{'active':filters.gangwei==item.gangwei}"
							v-for="(item,index) in cataList" @click="tabClick(item)" :key="index">
							{{getCataLabel(item)}}
						</view>
					</scroll-view>
				</view>

				<view class="menu-plus" @click="toSubmit">
					<van-icon name="plus" custom-style="font-size:31rpx;font-weight: bold;color:#fff;" />
				</view>
			</view>

			<view class="nav">
				<text :class="{'span':true,'active':filters.isHot==1}" @click="isHot(1)">推荐</text>
				<text :class="{'span':true,'active':filters.isHot!=1}" @click="isHot(0)">最新</text>
				<view class="span-right">
					<div class="span rightIcon" @click="cityOpen">
						<van-icon name="cross" @click.stop="closeCity" v-if="filters.city" />
						{{filters.city || "城市"}}
						<van-icon name="arrow-down" />
					</div>
					<view class="span rightIcon" @click="toToggle">
						筛选
						<van-icon name="arrow-down" />
					</view>
				</view>

			</view>

			<view class="list" v-if="type=='1'">
				<template v-if="isHasZhaopin">
					<view class="li" v-for="item in dataList" :key="item.id" @click="openDetails(item)">
						<view class="name">
							{{item.name}}
						</view>
						<view class="infor">
							{{item.education}} | {{item.workType=="不限"?"工作形式不限":item.workType}} | {{item.workDanwei.includes('月')? '月':'日'}}薪
							{{item.isMianyi==1? '面议': Math.floor(item.workSalary)}}
						</view>
						<view class="school">
							<van-icon name="bookmark-o" color="#7BB9FF" size="29rpx" custom-style="margin-right:28rpx;" />
							{{item.school}}-{{item.major}}
						</view>
						<text class="text van-multi-ellipsis--l2">
							{{item.jineng || ""}}
						</text>
						<view class="avatar">
							<img :src="baseImage + item.avatar" alt="" class="img" v-if="item.avatar" />
							<img :src="baseImage + usual.seekerAvatar2" mode="" class="img" v-else-if="item.sex=='女'">
							<img :src="baseImage + usual.seekerAvatar1" mode="" class="img" v-else>
							<img :src="imgUrl + 'man.png'" alt="" class="icon" v-if="item.sex=='男'" />
							<img :src="imgUrl + 'woman.png'" alt="" class="icon" v-else-if="item.sex=='女'" />
						</view>
					</view>
				</template>
				<template v-else>
					<view style="font-size: 25rpx;padding: 200rpx 60rpx;">
						<view class="item-main">
							<span>您还没有添加招聘意向，暂时无法匹配合适的岗位，点击上方 + 号即可添加招聘意向啦~</span>
						</view>
					</view>
				</template>
				<view style="font-size: 25rpx;padding: 200rpx 60rpx;" v-if="isHasZhaopin && total==0">
					<view class="item-main">
						<span>该标签暂无合适的岗位，请换个标签试试~</span>
					</view>
				</view>
			</view>

			<view class="list" v-else-if="type=='2'">
				<template v-if="isHasQiuzhi">
					<view class="item" v-for="item in dataList" :key="item.id" @click="openDetails(item)">
						<view class="item-main">
							<view class="item-line">
								<view class="item-title">
									{{item.title}}
								</view>
								<view class="item-price">
									{{item.isMianyi==0? (Math.floor(item.workSalary) + "元/天"):"面议"}}
								</view>
							</view>
							<view class="item-line">
								<text>{{item.workEducation=="不限"?"学历不限":item.workEducation}}</text>
								<text>{{item.workType=="不限"?"工作形式不限":item.workType}}</text>
							</view>
							<view class="item-tag" v-if="item.tip">
								<view v-for="(tag,index) in item.tip.split(',')" :key="index">{{tag}}</view>
								<view v-if="item.isDaijiao==1">带教服务</view>
							</view>
					
						</view>
					
						<view class="item-bottom">
							<view class="item-user">
								<view class="item-user-picdir">
									<image :src="baseImage + item.picdir" mode="" v-if="item.picdir"></image>
									<image :src="baseImage + usual.companyLogo" mode="" v-else></image>
								</view>
								<view class="item-user-name">
									{{item.companyTitle}}
								</view>
							</view>
							<view class="item-address">
								{{`${item.city.includes('/')? item.city.split('/')[2]:item.city}`}}
								<br />
								<view class="item-date">
									{{item.timeCreate.split(" ")[0]}}
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view style="font-size: 25rpx;padding: 200rpx 60rpx;">
						<view class="item-main">
							<span>您还没有添加求职意向，暂时无法匹配合适的岗位，点击上方 + 号即可添加求职意向啦~</span>
						</view>
					</view>
				</template>
				<view style="font-size: 25rpx;padding: 200rpx 60rpx;" v-if="isHasQiuzhi && total==0">
					<view class="item-main">
						<span>该标签暂无合适的岗位，请换个标签试试~</span>
					</view>
				</view>
			</view>


			<view class="bottomLine" v-if="total==this.dataList.length && total!=0">
				<text class="span">我是有底线的</text>
			</view>
		</view>

		<!-- 地址Select -->
		<van-popup position="bottom" :show="areaShowPicker">
			<van-area :areaList="areaList" @confirm="selectQydz" @cancel="onCelcel" />
		</van-popup>

		<Tabber currentPagePath="home"></Tabber>
	</view>
</template>

<script>
	import {
		swiper
	} from "@/core/web-api/common.js"
	import Tabber from '@/pages/common/Tabber.vue'
	import {
		mapGetters,
		mapState
	} from "vuex"
	import {
		getGangwei,
		getQiuzhiList
	} from "@/core/web-api/qiyeduan"
	import {
		getPostList,
		getQiyeList
	} from "@/core/web-api/qiuzhiduan.js"
	import {
		areaList
	} from '@/node_k/area-data/areadata';
	export default {
		data() {
			return {
				areaList: this.getAreaList(areaList),
				areaShowPicker: false,
				indicatorDots: false,
				autoplay: true,
				circular: true,
				interval: 3000, //切换的间隔时间
				duration: 500, //滑动动画时长
				bannerList: [],
				searchValue: "",
				cataList: [],
				sortActive: "",
				filters: {
					city: "",
					education: "", //学历			
					gangwei: "", //职位类型			
					hangye: "", //所属行业			
					keywords: "", //关键字筛选			
					province: "", //省份			
					workExperience: "", //工作经验			
					workTime: "", //工作时间			
					workType: "",
					isHot: 1,
				},
				page: {
					current: 1,
					limit: 10,
				},
				isKeywords:false,
				keywordsShow:false,
				total: 0,
				dataList: [],
				focus:false,
				isHasQiuzhi:true,
				isHasZhaopin:true,
			}
		},
		components: {
			Tabber,
		},
		methods: {
			getAreaList(areaList){
				
				let cityList = areaList.city_list
				for (let key in cityList) {
					areaList.county_list[key] = "不限"
				}
				
				let provinceList = areaList.province_list
				for (let key in provinceList) {
					areaList.city_list[key] = "不限"
				}
				
				return areaList;
			},
			setFocus(){
				this.$nextTick(() => {
					this.focus = true;
				})
			},
			keywordsClose() {
				this.isKeywords = false;
				this.keywordsShow = false;
				this.filters.keywords = "";
				
				this.filters.city = "";
				this.filters.education = "";
				this.filters.province = "";
				this.filters.workExperience = "";
				this.filters.workTime = "";
				this.filters.workType = "";
				this.filters.salary = ""
				this.filters.salaryMin = ""
				this.filters.salaryMax = ""
				
				this.filters.gangwei = (this.cataList && this.cataList.length > 0) ? this.cataList[0]
					.gangwei :
					"";
				this.filters.hangye = (this.cataList && this.cataList.length > 0) ? this.cataList[0]
					.hangye :
					"";
				this.getDataList();
			},
			closeCity() {
				this.filters.city = "";
				this.filters.province = "";
				setTimeout(() => {
					this.onCelcel();
					this.getDataList()
				}, 100)
			},
			onCelcel() {
				this.areaShowPicker = false;
			},
			cityOpen() {
				this.areaShowPicker = true;
			},
			/**
			 * 选择地址
			 */
			selectQydz({
				values
			}) {
				let list = values
					.filter((item) => !!item)
					.map((item) => item.name);
				console.log("筛选位置选择的地区：",list)
				if(list.length==1){
					list[1] = "不限"
					list[2] = "不限"
				}else if(list.length==2){
					list[2] = "不限"
				}
				this.filters.city = list[0] + "/" +list[1] + "/" + list[2];
				this.filters.province = list[0];
				this.areaShowPicker = false;
				this.page.current = 1;
				this.getDataList()
			},
			toSubmit() {
				let url = "";
				if (this.type == 1) {
					url = "/pages/ucenter/qiyeduan/gangwei/add"
				} else {
					url = "/pages/ucenter/qiuzhiduan/qiuzhi/add"
				}
				uni.navigateTo({
					url
				})
			},
			// TODO:最新、推荐筛选暂无
			/**
			 * 跳转筛选页
			 */
			toToggle() {
				uni.navigateTo({
					url: "/pages/web/search/search"
				})
			},
			/**
			 * tab筛选
			 * @param {Object} item
			 */
			tabClick(item) {
				if (typeof item == "string") {
					this.filters.gangwei = "";
					this.filters.hangye = "";
					
					this.filters.city = this.indexFilters.city;
					this.filters.education = this.indexFilters.education;
					this.filters.province = this.indexFilters.province;
					this.filters.workExperience = this.indexFilters.workExperience;
					this.filters.workTime = this.indexFilters.workTime;
					this.filters.workType = this.indexFilters.workType;
					this.filters.salary = this.indexFilters.salary;
					this.filters.salaryMin = this.indexFilters.salaryMin;
					this.filters.salaryMax = this.indexFilters.salaryMax;
					
					
					this.isKeywords = true;
					this.getDataList();
					return;
				}
				if (this.filters.gangwei == (item.title || item.gangwei)) return;
				this.filters.gangwei = item.gangwei;
				this.filters.hangye = item.hangye;
				
				this.filters.city = "";
				this.filters.education = "";
				this.filters.province = "";
				this.filters.workExperience = "";
				this.filters.workTime = "";
				this.filters.workType = "";
				this.filters.salary = ""
				this.filters.salaryMin = ""
				this.filters.salaryMax = ""
				
				this.isKeywords = false;
				this.page.current = 1;
				this.getDataList();
			},
			/**
			 * 搜索
			 */
			onSearch() {
				console.log(this.filters.keywords)
				if(!this.filters.keywords){
					uni.showToast({
						title:"请输入关键词！",
						icon:"none"
					})
					this.keywordsClose();
					return;
				}
				this.page.current = 1;
				this.filters.city = "";
				this.filters.education = "";
				this.filters.province = "";
				this.filters.workExperience = "";
				this.filters.workTime = "";
				this.filters.workType = "";
				this.filters.salary = ""
				this.filters.salaryMin = ""
				this.filters.salaryMax = ""
				this.filters.gangwei = "";
				this.filters.hangye = "";
				this.isKeywords = true;
				this.keywordsShow = true;
				this.getDataList()
			},
			/**
			 * 最新推荐
			 */
			isHot(i) {
				this.filters.isHot = i;
				this.page.current = 1;
				this.filters.city = "";
				this.filters.education = "";
				this.filters.province = "";
				this.filters.workExperience = "";
				this.filters.workTime = "";
				this.filters.workType = "";
				this.filters.salary = ""
				this.filters.salaryMin = ""
				this.filters.salaryMax = ""
				this.getDataList()
				// this.onSearch()
			},
			/**
			 * 跳转详情
			 */
			openDetails(item) {
				let url = "";
				if (this.type == '1') {
					url = "/pages/web/rencaiDetail?id=" + item.id
				} else {
					url = "/pages/web/gangweiDetail?id=" + item.id;
				}
				uni.navigateTo({
					url
				})
			},
			/**
			 * 获取轮播图
			 */
			getSwiperList() {
				swiper({
					sort: "首页轮播图",
					limit: 5
				}).then(res => {
					this.bannerList = res.data.list
				})
			},

			/**
			 * 加载岗位意向
			 */
			getCataList() {
				if (this.type == 1) {
					getGangwei().then(res => {
						if (res.data.list.length > 0) {
							this.cataList = res.data.list;
							if (!this.filters.gangwei && !this.isKeywords) {
								this.filters.gangwei = (this.cataList && this.cataList.length > 0) ? this.cataList[0]
									.gangwei :
									"";
								this.filters.hangye = (this.cataList && this.cataList.length > 0) ? this.cataList[0]
									.hangye :
									"";
							}
							this.getDataList();
						}else{
							this.isHasZhaopin = false
						}
					})
				} else {
					getPostList().then(res => {
						if (res.data.list.length > 0) {
							this.isHasQiuzhi = true
							this.cataList = res.data.list;
							if (!this.filters.gangwei && !this.isKeywords) {
								this.filters.gangwei = (this.cataList && this.cataList.length > 0) ? this.cataList[
										0]
									.gangwei :
									"";
								this.filters.hangye = (this.cataList && this.cataList.length > 0) ? this.cataList[
										0]
									.hangye :
									"";
							}

							this.getDataList();
						} else {
							this.isHasQiuzhi = false
							//跳转发布求职
							// uni.navigateTo({
							// 	url: "/pages/ucenter/qiuzhiduan/qiuzhi/add"
							// })
						}
					})
				}

			},

			/**
			 * 加载数据列表
			 */
			getDataList() {
				let filters = JSON.parse(JSON.stringify(this.filters));
				if (filters.salary) {
					let salaryList = filters.salary.split("-");
					filters.salaryMin = salaryList[0]
					filters.salaryMax = salaryList[1]
				} else {
					filters.salaryMin = ""
					filters.salaryMax = ""
				}
				if(filters.gangwei || filters.hangye){
					filters.keywords = "";
				}
				console.log("重新加载了！！！！！！！！！！")
				
				if(this.filters.city || this.filters.education || this.filters.province || this.filters.workExperience || this.filters.workTime || this.filters.workType || this.filters.salary){
					console.log("清空行业和岗位！！！！！！")
					this.filters.gangwei = "";
					this.filters.hangye = "";
					filters.gangwei = "";
					filters.hangye = "";
					this.isKeywords = true;
					this.keywordsShow = true;
				}
				
				
				
				if (this.type == 1) {
					this.getQiuzhiDataList(filters)
				} else {
					this.getQiyeDataList(filters);
				}
			},

			getLoginTimeToListByAid(list, aid) {
				let item = list.find(item => item.aid == aid);
				return item ? item.loginTime : ""
			},

			/**
			 * 企业加载求职列表
			 */
			getQiuzhiDataList(filters) {
				for (let key in filters) {
					if (filters[key] == '不限') {
						filters[key] = ""
					}
				}
				getQiuzhiList({
					...this.page,
					...filters
				}).then(res => {
					if (res.code == 20000) {
						const list = res.data.list;
						if (this.filters.isHot == 1) {
							//todo 需判断isHot=1时候的其他排序
							console.log(loginTime); //登录时间
							let loginTime = res.data.loginTime;
							list.sort((item1, item2) => {
								let item1LoginTime = this.getLoginTimeToListByAid(loginTime, item1.aid);
								let item2LoginTime = this.getLoginTimeToListByAid(loginTime, item2.aid);
								if (!item1LoginTime || item2LoginTime) return true;
								return new Date(item2LoginTime).getTime() - new Date(item1LoginTime)
									.getTime();
							})
							console.log(list)
						}
						if (this.page.current == 1) {
							this.dataList = list;
						} else {
							this.dataList.push(...list)
						}
						this.total = res.data.total;
					}

				})
			},

			/**
			 * 求职者加载企业列表
			 */
			getQiyeDataList(filters) {
				for (let key in filters) {
					if (filters[key] == '不限') {
						filters[key] = ""
					}
				}
				getQiyeList({
					...this.page,
					...filters
				}).then(res => {
					if (res.code == 20000) {
						const list = res.data.list;
						if (this.filters.isHot == 1) {
							//todo 需判断isHot=1时候的其他排序
							console.log(loginTime); //登录时间
							let loginTime = res.data.loginTime;
							list.sort((item1, item2) => {
								if (item1.sessNum != item2.sessNum) {
									return item1.sessNum - item2.sessNum
								}
								if (item1.aid != item2.aid) {
									let item1LoginTime = this.getLoginTimeToListByAid(loginTime, item1
										.aid);
									let item2LoginTime = this.getLoginTimeToListByAid(loginTime, item2
										.aid);
									if (!item1LoginTime || item2LoginTime) return true;
									return new Date(item2LoginTime).getTime() - new Date(item1LoginTime)
										.getTime();
								}
								if (!item1.tip.includes("保险") && !item2.tip.includes("保险")) return true;
								return item1.tip.includes("保险") ? -1 : 1
							})
						}
						if (this.page.current == 1) {
							this.dataList = list;
						} else {
							this.dataList.push(...list)
						}
						this.total = res.data.total;
					}
				})
			},

			/**
			 * 分页
			 */
			pageData() {
				if (this.total == this.dataList.length) {
					return;
				}
				this.page.current++;
				this.getDataList();
			},
			getUserInfo() {
				if (Object.keys(this.userInfo).length > 0) return;
				this.$store.dispatch("getUserInfoAction")
			},
			getUsualAction() {
				if (Object.keys(this.usual).length > 0) return;
				this.$store.dispatch("getUsualAction")
			}
		},
		onReachBottom() {
			this.pageData();
		},
		computed: {
			...mapGetters(['getStateHeight', 'getNavbar', 'getMenuRectHeight']),
			...mapState(['baseImage', "indexFilters", 'type', 'userInfo', 'usual', 'imgUrl']),
			getCataLabel() {
				return function(item) {
					let title = this.type == 1 ? item.title : item.gangwei;
					// if(this.type==2){
						if(title.length>10){
							title = title.slice(0, 10) + "..."
						}
						return title;
					// }
					// if (title.length > 5) {
					// 	title = title.slice(0, 5) + "..."
					// }
					return title;
				}
			}
		},
		watch: {
			indexFilters: {
				immediate: true,
				deep: true,
				handler(obj) {
					if (!obj) return;
					for (let key in obj) {
						this.filters[key] = obj[key];
					}
					
				}
			},
			userInfo: {
				immediate: true,
				deep: true,
				handler(obj) {
					if (obj && Object.keys(obj).length > 0) {
						this.$socket.reset()
					}
				}
			}
		},
		mounted() {
			let that = this
			uni.$on('reload',function(data){
				console.log("触发更新后")
				console.log(data)
				if(data){
					that.tabClick(data)
					// this.filters.gangwei = data.gangwei
					// this.filters.hangye = data.hangye
				}
			})
		},
		onUnload() {
			uni.$off('reload')
		},
		onShow() {
			this.page.current = 1;
			this.getCataList();
		},
		created() {
			this.filters = {
				city: "",
				education: "", //学历			
				gangwei: "", //职位类型			
				hangye: "", //所属行业			
				keywords: "", //关键字筛选			
				province: "", //省份			
				workExperience: "", //工作经验			
				workTime: "", //工作时间			
				workType: "",
				isHot: 1,
			};
			this.getUserInfo()
			this.getSwiperList();
			this.getUsualAction();
		}
	}
</script>

<style>
	@import url(./home.css);
</style>
<style scoped lang="less">
	.span {
		&-right {
			display: flex;
			justify-content: flex-end;
			flex: 1;
		}
	}

	.nav {
		display: flex;
		align-items: center;
	}

	.menu {
		margin-bottom: 40upx;
		position: relative;
		z-index: 20;
		display: flex;
		height: 50upx;
		
		/deep/ ::--webkit-scrollbar{
			display: none;
			width: 0;
			height: 0;
			color: transparent;
		}

		&-content {
			width: 650upx;
			overflow: hidden;
			margin-right: 10upx;
			height: 50rpx;
		}

		&-view {
			white-space: nowrap;
			height: 50rpx;
		}
		
		&-close{
			position: absolute;
			left: -30upx;
			top: 0upx;
			
		}

		&-item {
			display: inline-block;
			font-size: 32upx;
			color: #080808;
			margin-right: 50upx;
			position: relative;
			height: 50upx;
			&.keywords{
				margin-left: 30upx;
			}
			

			&:last-child {
				margin-right: 0;
			}

			&.active {
				position: relative;
				font-weight: bold;
				height: 50upx;
				&::after {
					display: block;
					content: '';
					width: 74rpx;
					height: 7rpx;
					background: #0180FF;
					position: absolute;
					bottom: -2upx;
					left: 50%;
					margin-left: -37rpx;

				}
			}
		}
	}

	.item {
		margin-bottom: 40upx;
		background-color: #fff;
		border-radius: 8upx;
		padding: 25upx 30upx 20upx 30upx;
		box-sizing: border-box;
		box-shadow: 3upx 0 7upx rgba(220, 220, 220, .35);
		position: relative;

		&:last-child {
			margin-bottom: 0;
		}

		&-box {
			margin-top: 30upx;
		}

		&-more {
			width: 100%;
			display: flex;
			justify-content: center;

			&.rorate {
				transform: rotate(180deg);
			}
		}

		&-line {
			display: flex;
			align-items: center;
			margin-bottom: 10upx;

			&:last-child {
				margin-bottom: 0;
			}

			text {
				font-size: 26upx;
				color: #666666;
				display: block;
				height: 26upx;
				line-height: 26upx;

				&:nth-child(2) {
					padding-left: 10upx;
					margin-left: 10upx;
					border-left: 2upx solid #666;
				}
			}
		}

		&-title {
			flex: 1;
			font-size: 34upx;
			color: #000;
			font-weight: bold;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			text-overflow: ellipsis;
			/* 使用省略号表示超出部分 */
		}

		&-price {
			font-size: 30upx;
			color: #0180ff;
		}

		&-tag {
			display: flex;
			flex-flow: wrap;
			margin-top: 15upx;

			view {
				font-size: 20upx;
				color: #333333;
				height: 38upx;
				padding: 0 14upx;
				border-radius: 19upx;
				background-color: #d0e0fd;
				margin-right: 20upx;
				line-height: 38upx;
			}
		}

		&-bottom {
			width: 100%;
			display: flex;
			margin-top: 25upx;
			padding: 15upx 0upx 0 0;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			border-top: 2upx solid #f8f8f8;
		}

		&-main {
			position: relative;
		}

		&-address {
			font-size: 20upx;
			color: #333333;
			text-align: right;
			line-height: 1.5;
		}

		&-date {
			font-size: 20upx;
			color: #999999;
		}

		&-user {
			display: flex;
			align-items: center;

			&-picdir {
				width: 54upx;
				height: 54upx;
				border-radius: 50%;
				border: 2upx solid #b5b5b5;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			&-name {
				margin-left: 10upx;
				font-size: 22upx;
				color: #999999;
			}
		}

		&-status {
			font-size: 25upx;
			color: #999999;

			&.publish {
				color: #00cf7a;
			}

			&.audio {
				color: #fc637d;
			}
		}

		&-info {
			line-height: 1.5;

			&-box {
				margin-top: 20upx;
			}

			text {
				font-size: 26upx;
				color: #666666;
			}
		}
	}
</style>